{% extends 'base.html' %}
{% block content %}
 

<section id="showcase-inner" class="py-5 text-white">
  <div class="container">
    <div class="row text-center">
      <div class="col-md-12">
        <h1 class="display-4">Browse Our Properties {{ name }}</h1>
        <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt, pariatur!</p>
      </div>
    </div>
  </div>
</section>

<!-- Breadcrumb -->
  <section id="bc" class="mt-3">
    <div class="container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="{% url 'index' %}">
              <i class="fas fa-home"></i> Home</a>
          </li>
          <li class="breadcrumb-item active"> Browse Listings</li>
        </ol>
      </nav>
    </div>
  </section>


  <!-- Listings -->
  <section id="listings" class="py-4">
    <div class="container">
      <div class="row">
        {% if listings %}
          {% for listing in listings %}
          <div class="col-md-6 col-lg-4 mb-4">
            <div class="card listing-preview">
              <img class="card-img-top" src="{{ listing.photo_main.url }}" alt="">
              <div class="card-img-overlay">
                <h2>
                  <span class="badge badge-secondary text-white">${{listing.price}}</span>
                </h2>
              </div>
              <div class="card-body">
                <div class="listing-heading text-center">
                  <h4 class="text-primary">{{ listing.title }}</h4>
                  <p>
                    <i class="fas fa-map-marker text-secondary"></i> {{ listing.city }}, {{ listing.state }}, {{ listing.zipcode }}</p>
                </div>
                <hr>
                <div class="row py-2 text-secondary">
                  <div class="col-6">
                    <i class="fas fa-th-large"></i> Sqft: {{ listing.sqft }}</div>
                  <div class="col-6">
                    <i class="fas fa-car"></i> Garage: {{ listing.garage }}</div>
                </div>
                <div class="row py-2 text-secondary">
                  <div class="col-6">
                    <i class="fas fa-bed"></i> bedromms: {{ listing.bedrooms }}</div>
                  <div class="col-6">
                    <i class="fas fa-bath"></i> bathrooms: {{ listing.bathrooms }}</div>
                </div>
                <hr>
                <div class="row py-2 text-secondary">
                  <div class="col-12">
                    <i class="fas fa-user"></i> {{ listing.realtor }}</div>
                </div>
                <div class="row text-secondary pb-2">
                  <div class="col-6">
                    <i class="fas fa-clock"></i> {{ listing.list_date | timesince }}</div>
                </div>
                <hr>
                <a href="{% url 'listing' listing.id %}" class="btn btn-primary btn-block">More Info</a>
              </div>
            </div>
          </div>
          {% endfor %} 
        {% else %}
          <div class="col-md-12">
            <p>No Listings Available</p>
          </div>
        {% endif %}
      </div>

      <div class="row">
        <div class="col-md-12">
          {% if listings.has_other_pages %}   <!-- 如果传进来的 listings 有内容，就进行渲染 ul，类名为pagination. -->
          <ul class="pagination">
            {% if listings.has_previous %} <!-- 判断如果有上一页，渲染一个可以点击跳转到上一页的按键。 -->
            <li class="page-item">
              <a href="?page={{listings.previous_page_number}}" class="page-link">&laquo;</a>
            </li>
            {% else %}  <!-- 否则，渲染一个无法点击的按键（通过使用 disabled 的类名） -->
            <li class="page-item disabled">
              <a class ="page-link">&lsaquo;</a>
            </li>
            {% endif %}  <!-- 完成了上一页按键的网页结构。 -->

            {% for i in listings.paginator.page_range %}  <!-- 下面实现的是跳转到某一页按键的网页结构。 -->
              {% if listings.number == i %}
              <li class="page-item active">
                <a class="page-link">{{ i }}</a>
              </li>
              {% else %}
              <li class="page-item">
                <a href="?page={{i}}" class="page-link">{{ i }}</a>
              </li>
              {% endif %}
            {% endfor %}

            {% if listings.has_next %}  <!-- 实现跳转到下一页的网页结构。 -->
            <li class="page-item">
              <a href="?page={{listings.next_page_number}}" class="page-link">&raquo;</a>
            </li>
            {% else %}
              <li class="page-item disabled">
                <a class="page-link">&rsaquo;</a>
              </li>
            {% endif %}
          </ul>
          {% endif %}
        </div>
      </div>
    </div>
  </section>
{% endblock %}